<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 1200px;
        border: 1px solid;
        margin: auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .box>div{
        width: 220px;
        height: 400px;
        border: 1px solid #f2f2f2;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 6px;
    }
    .box>div:hover{
        border-color: orangered;
    }
    .box>div>img{
        width: 200px;
        height: 250px;
    }
    .price{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price span:nth-of-type(1) {
        font-size: 20px;
        color: orangered;
    }
    .price span:nth-of-type(2) {
        font-size: 12px;
        color: orangered;
    }
    .head{
        height: 60px;
        color: #333;
        font-size: 14px;
        word-break: break-all;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .shop{
        color: orangered;
        font-size: 14px;
        font-weight: 500;
    }


</style>
<body>
    <div class="box">
        <!-- <div>
            <img src="http://img2014.zuyushop.com/ProPic/201412/Thumb/Thumb_2014120015214690353.jpg" alt="">
            <div class="price">
                <span>￥1479.00</span>
                <span>评论(2403)</span>
            </div>
            <div class="head">
                奥克斯(AUX) KFR-25GW/FK01+3 1匹 挂壁式定速冷暖空调
            </div>
            <div class="shop">
                奥克斯旗舰店
            </div>

        </div> -->
    </div>
    

    <script src="../all.js"></script>
    <script>

        let oBox = document.querySelector('.box')
        let obj = {
            categoryid:"1"
        }
        function callback(res) {
            let div = '';
                res.result.forEach(item => {
                    div += `<div>
                            ${item.productImg}
                            <div class="price">
                                <span>${item.productPrice}</span>
                                <span>${item.productCom}</span>
                            </div>
                            <div class="head">
                                ${item.productName}
                            </div>
                            <div class="shop">
                                ${item.brandName}
                            </div>

                        </div>`
                });
            oBox.innerHTML = div;
        }
        _ajax('get','http://chst.vip:1234/api/getproductlist',true,obj,callback)
        // search.oninput = function() {
            /* const xhr = new XMLHttpRequest();
            xhr.open('get','http://chst.vip:1234/api/getproductlist?categoryid=1',true)
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let res = JSON.parse(xhr.responseText);
                        let div = '';
                        res.result.forEach(item => {
                            div += `<div>
                                    ${item.productImg}
                                    <div class="price">
                                        <span>${item.productPrice}</span>
                                        <span>${item.productCom}</span>
                                    </div>
                                    <div class="head">
                                        ${item.productName}
                                    </div>
                                    <div class="shop">
                                        ${item.brandName}
                                    </div>

                                </div>`
                        });
                        oBox.innerHTML = div;
                        
                    }
                }
            }
            xhr.send(null); */
        // }
        
    </script>
</body>
</html>
